<script setup>
import { ref } from 'vue'
const messageList = ref([])
let id = 0
const sendMessage = () => {
    id++
    let message = ""
    if(window.htmlToUnity){
        message = `htmlToUnity：消息${id}`
        window.htmlToUnity(message)
    } else {
        message = 'window.htmlToUnity不存在，无法发送消息'
    }
    messageList.value.push(message)
}
window.unityToHtml = (message) => {
    messageList.value.push(`unityToHtml：${message}`)
}
//全屏
const fullScreen = () => {
    let message = ""
    if(window.htmlToUnity){
        message = `htmlToUnity：进入全屏${id}`
        window.htmlToUnity("FullScreen")
    } else {
        message = 'window.htmlToUnity不存在，无法发送消息'
    }
    messageList.value.push(message)
}
const exitFullScreen = () => {
    let message = ""
    if(window.htmlToUnity){
        message = `htmlToUnity：退出全屏${id}`
        window.htmlToUnity("ExitFullScreen")
    } else {
        message = 'window.htmlToUnity不存在，无法发送消息'
    }
    messageList.value.push(message)
}
</script>

<template>
    <div class="unity-container">
        <div class="btn-message" @click="sendMessage">js发送消息到unity</div>
        <div class="btn-message" @click="fullScreen">进入全屏</div>
        <div class="btn-message" @click="exitFullScreen">退出全屏</div>
        <div>消息列表：</div>
        <ul>
            <li v-for="item in messageList" :key="item">{{ item }}</li>
        </ul>
    </div>
</template>

<style lang='scss' scoped>
.unity-container{
    padding: 16px;
}
.btn-message{
    padding: 8px 16px;
    background-color: rgb(250, 115, 25);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 10px;
}
</style>